"""
@author: Gaoyaoxia
@date: 2020-08-24 10:50:59
"""
<!-- 文本仓库首页 -->
<template>
  <div class="text-index">
    <div class="text-top">
      <div class="text-search">
        <a-form layout="inline" :form="form">
          <a-form-item>
            <a-select v-model="keyName" style="width:100px">
              <!-- :getPopupContainer="triggerNode => triggerNode.parentNode" -->
              <a-select-option value="2">全部</a-select-option>
              <a-select-option value="titleName">文件名称</a-select-option>
              <a-select-option value="status">状态</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-input
              class="search-input"
              v-model="searchWord"
              type="text"
              placeholder="请输入您要的搜索的内容"
            ></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" class="search-btn" @click="searchText()">搜索</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="text-addbtn">
        <a-button type="primary" class="add-btn" @click="addText()">新增</a-button>
      </div>
    </div>
    <div class="text-list">
      <a-table
        :loading="loading"
        :columns="columns"
        :data-source="list"
        rowKey="id"
        :pagination="false"
        @change="changePage"
        :scroll="{ x: 500}"
      >
        <!-- :pagination="pagination" -->
        <template slot-scope="text,record" slot="titleName">
          <div class="file-name-style">{{record.titleName}}</div>
        </template>
        <template slot-scope="text,record" slot="updateTime">
          <div style="fontSize: 16px; color: #737982">{{record.updateTime}}</div>
        </template>
        <template slot-scope="text,record" slot="status">
          <span
            :style="{'color':record.status == 0?'#737982': record.status == 1? 'orange' : record.status == 2 ? '#f50' : '#000', 'fontSize': '16px'}"
          >{{record.status|fileStatus}}</span>
        </template>
        <template slot-scope="text,record" slot="action">
          <i class="suncnui suncnui-icon-bianji" @click="editText(record)"></i>
          <i class="suncnui suncnui-icon-lajixiang" @click="removeText(record)"></i>
        </template>
      </a-table>
    </div>
    
  </div>
</template>

<script>

export default {
  props: {
  },
  data() {
    return {
      keyName: "2",
      searchWord: "",
      form: {
        titleName: "",
        status: "",
      },
      loading: false,
      pagination: {},
      columns: [
        {
          title: "文件名称",
          dataIndex: "titleName",
          width: "240px",
          align: "center",
          ellipsis: true,
          scopedSlots: { customRender: "titleName" },
        },
        {
          title: "更新时间",
          dataIndex: "updateTime",
          width: "100px",
          align: "center",
          ellipsis: true,
          scopedSlots: { customRender: "updateTime" },
        },
        {
          title: "状态",
          dataIndex: "status",
          width: "100px",
          align: "center",
          scopedSlots: { customRender: "status" },
        },
        {
          title: "操作",
          dataIndex: "action",
          width: "120px",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      list: [
        {
          id: 1,
          titleName: "关于更好发挥企业家在经济决策和促进企业业家在经济决策...",
          content:'',
          updateTime: "2020-07-25 08:28:32",
          status: 2,
        },
        {
          id: 2,
          titleName: "关于更好发挥企业家在经济决策和促进企业",
          content:'',
          updateTime: "2020-07-25 08:28:32",
          status: 0,
        },
        {
          id: 3,
          titleName: "关于更好发挥企业家在经济决策和促进企业",
          content:'',
          updateTime: "2020-07-25 08:28:32",
          status: 0,
        },
        {
          id: 4,
          titleName: "关于更好发挥企业家在经济决策和促进企业",
          content:'',
          updateTime: "2020-07-25 08:28:32",
          status: 0,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    searchText() {
      if(this.searchWord == ""){
        this.$message.warning("请输入要搜索的内容");
        return false;
      }
      //调搜索列表接口
    },
    addText() {
      this.$emit("addText");
    },
    editText(record) {
      this.$emit("editText", record);
    },
    removeText(record) {
      var _this = this;
      this.$confirm({
        title: "是否确认删除该条记录？",
        onOk() {
          //调删除文本列表接口
          _this.$message.success("已删除");
        },
      });
    },
    //分页
    changePage(pagination) {
      this.pageNum = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      // this.getlist();
    },
  },
  created() {},
};
</script>
<style lang='stylus' scoped>
.text-index
  padding-left 10px
.text-top
  width 100%
  margin 20px 0px
  padding 0px 16px
  height 40px
  .text-search
    width calc(100% - 70px)
    float left
    overflow hidden
    position relative
    .search-input
      min-width 290px
      height 34px
      font-size 14px
    .search-btn
      height 34px
      background #1694cf
      color #ffffff
      border 0px
      font-size 14px
  .text-addbtn
    overflow hidden
    float right
    .add-btn
      height 34px
      background #1694cf
      color #ffffff
      border 0px
      font-size 14px
      margin-top 3px
.text-list
  margin-top 10px
  margin 16px
.file-name-style
  color #333333
  font-size 16px
  text-align left
  white-space nowrap
  text-overflow ellipsis
  overflow hidden
.suncnui
  font-size 24px
  color #737982
  cursor pointer
  margin-left 10px
.suncnui:hover
  color #1694cf
</style>